<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.min.js"
			type="application/javascript"></script>
		<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/animejs/3.2.1/anime.min.js"
			type="application/javascript"></script>
		<link rel="stylesheet" href="css/index.css">
	</head>
	<body>
		<header><img src="https://pic.imgdb.cn/item/624d3da5239250f7c56f223b.png" class="heagerImg"></header>
		<div class="bodyBox">
			<div class="elinfo" id="elinfo">
				<section>
					<dl>
						<dt>欢迎你</dt>
						<dd>
							<li>你可以点击一个元素，将在这里出现他的详细信息，以及更多的功能</li>


						</dd>
					</dl>
					<dl>
						<dt>可视化趋势</dt>
						<dd>
							<li>可视化趋势是彩叶化学的优势功能</li>
							<li>详细信息的顶部的滑动条是温度，拖动可以展示不同温度下元素的状态</li>
							<li>详细信息中所有有对勾的行是可以被点击的，展示他的可视化趋势</li>
						</dd>
					</dl>
					<dl>
						<dt>信息</dt>
						<dd>
							<li>所有的信息与IUPAC相吻合，如果有新的变化会灵活的更新</li>
							<li><a href="http://agrochemicals.iupac.org/">点击进入IUPAC</a></li>

						</dd>
					</dl>

					<dl>
						<dt>移动端的设备</dt>
						<dd>
							<li>移动端依然可以很好地使用，不论屏幕是横屏或是竖屏</li>
						</dd>
					</dl>
					<dl>
						<dt>历史</dt>
						<dd>
							<li>2017年8月2日，一个暑假的契机下，彩叶化学建站了，并经过了几次小的更新</li>
							<li>2019年7月30日，这一年是周期表诞生第150年，为了纪念伟大的门捷列夫，彩叶化学被全面的升级了</li>
							<li>2022年4月9日，已经步入大学的我再一次从头重写了彩叶化学，希望可以以此致敬门捷列夫先生</li>
						</dd>
					</dl>
				</section>


			</div>

			<div class="elmain">
				<div align="center" style="width: 100%;overflow: auto;">
					<div class="elbox">
						<div class="elboxs3 h20p">

						</div>
						<div class="elboxs2 h20p">
							<br><br>
							IA
						</div>

					</div>
					<div class="elbox">
						<div class="elboxs3">
							<br>
							1
						</div>
						<div class="trueel elboxs elc7">
							<a title="氢"><span class="elrd">1</span>&nbsp;<span class="elff">H</span><br>
								<span class="eltl">氢</span><br>
								<span class="elen"></span></a>
						</div>
						<div class="elboxs2">
							<br>
							IIA
						</div>
						<div class="elboxs0">
							<div class="miniBox elc1">碱金属</div>
							<div class="miniBox elc2">碱土金属</div>
							<div class="miniBox elc3">过渡金属</div>
							<div class="miniBox elc6">金属</div>
							<div class="miniBox elc9">类金属</div>
							<div class="miniBox elc7">非金属</div>
							<div class="miniBox elc8">稀有气体</div>
							<div class="miniBox elc4">镧系</div>
							<div class="miniBox elc5">锕系</div>
						</div>
						<div class="elboxs2">
							<br>
							IIIA
						</div>
						<div class="elboxs2">
							<br>
							IVA
						</div>
						<div class="elboxs2">
							<br>
							VA
						</div>
						<div class="elboxs2">
							<br>
							VIA
						</div>
						<div class="elboxs2">
							<br>
							VIIA
						</div>
						<div class="trueel elboxs elc8">
							<a title="氦"><span class="elrd">2</span>&nbsp;<span class="elff">He</span><br>
								<span class="eltl">氦</span><br>
								<span class="elen"></span></a>
						</div>
					</div>
					<div class="elbox">
						<div class="elboxs3">
							<br>
							2
						</div>
						<div class="trueel elboxs elc1">
							<a title="锂"><span class="elrd">3</span>&nbsp;<span class="elff">Li</span><br>
								<span class="eltl">锂</span><br>
								<span class="elen"></span></a>
						</div>
						<div class="trueel elboxs elc2">
							<a title="铍"><span class="elrd">4</span>&nbsp;<span class="elff">Be</span><br>
								<span class="eltl">铍</span><br>
								<span class="elen"></span></a>
						</div>
						<div class="elboxs2"></div>
						<div class="elboxs2"></div>
						<div class="elboxs2"></div>
						<div class="elboxs2"></div>
						<div class="elboxs2"></div>
						<div class="elboxs2"></div>
						<div class="elboxs2"></div>
						<div class="elboxs2"></div>
						<div class="elboxs2"></div>
						<div class="elboxs2"></div>
						<div class="trueel elboxs elc9">
							<a title="硼"><span class="elrd">5</span>&nbsp;<span class="elff">B</span><br>
								<span class="eltl">硼</span><br>
								<span class="elen"></span></a>
						</div>
						<div class="trueel elboxs elc7">
							<a title="碳"><span class="elrd">6</span>&nbsp;<span class="elff">C</span><br>
								<span class="eltl">碳</span><br>
								<span class="elen"></span></a>
						</div>
						<div class="trueel elboxs elc7">
							<a title="氮"><span class="elrd">7</span>&nbsp;<span class="elff">N</span><br>
								<span class="eltl">氮</span><br>
								<span class="elen"></span></a>
						</div>
						<div class="trueel elboxs elc7">
							<a title="氧"><span class="elrd">8</span>&nbsp;<span class="elff">O</span><br>
								<span class="eltl">氧</span><br>
								<span class="elen"></span></a>
						</div>
						<div class="trueel elboxs elc7">
							<a title="氟"><span class="elrd">9</span>&nbsp;<span class="elff">F</span><br>
								<span class="eltl">氟</span><br>
								<span class="elen"></span></a>
						</div>
						<div class="trueel elboxs elc8">
							<a title="氖"><span class="elrd">10</span>&nbsp;<span class="elff">Ne</span><br>
								<span class="eltl">氖</span><br>
								<span class="elen"></span></a>
						</div>
					</div>
					<div class="elbox">
						<div class="elboxs3">
							<br>
							3
						</div>
						<div class="trueel elboxs elc1">
							<a title="钠"><span class="elrd">11</span>&nbsp;<span class="elff">Na</span><br>
								<span class="eltl">钠</span><br>
								<span class="elen"></span></a>
						</div>
						<div class="trueel elboxs elc2">
							<a title="镁"><span class="elrd">12</span>&nbsp;<span class="elff">Mg</span><br>
								<span class="eltl">镁</span><br>
								<span class="elen"></span></a>
						</div>
						<div class="elboxs2">
							<br>
							IIIB
						</div>
						<div class="elboxs2">
							<br>
							IVB
						</div>
						<div class="elboxs2">
							<br>
							VB
						</div>
						<div class="elboxs2">
							<br>
							VIB
						</div>
						<div class="elboxs2">
							<br>
							VIIB
						</div>
						<div class="elboxs2"></div>
						<div class="elboxs2">
							<br>
							VIII
						</div>
						<div class="elboxs2"></div>
						<div class="elboxs2">
							<br>
							IB
						</div>
						<div class="elboxs2">
							<br>
							IIB
						</div>
						<div class="trueel elboxs elc6">
							<a title="铝"><span class="elrd">13</span>&nbsp;<span class="elff">Al</span><br>
								<span class="eltl">铝</span><br>
								<span class="elen"></span></a>
						</div>
						<div class="trueel elboxs elc9">
							<a title="硅"><span class="elrd">14</span>&nbsp;<span class="elff">Si</span><br>
								<span class="eltl">硅</span><br>
								<span class="elen"></span></a>
						</div>
						<div class="trueel elboxs elc7">
							<a title="磷"><span class="elrd">15</span>&nbsp;<span class="elff">P</span><br>
								<span class="eltl">磷</span><br>
								<span class="elen"></span></a>
						</div>
						<div class="trueel elboxs elc7">
							<a title="硫"><span class="elrd">16</span>&nbsp;<span class="elff">S</span><br>
								<span class="eltl">硫</span><br>
								<span class="elen"></span></a>
						</div>
						<div class="trueel elboxs elc7">
							<a title="氯"><span class="elrd">17</span>&nbsp;<span class="elff">Cl</span><br>
								<span class="eltl">氯</span><br>
								<span class="elen"></span></a>
						</div>
						<div class="trueel elboxs elc8">
							<a title="氩"><span class="elrd">18</span>&nbsp;<span class="elff">Ar</span><br>
								<span class="eltl">氩</span><br>
								<span class="elen"></span></a>
						</div>
					</div>
					<div class="elbox">
						<div class="elboxs3">
							<br>
							4
						</div>
						<div class="trueel elboxs elc1">
							<a title="钾"><span class="elrd">19</span>&nbsp;<span class="elff">K</span><br>
								<span class="eltl">钾</span><br>
								<span class="elen"></span></a>
						</div>
						<div class="trueel elboxs elc2">
							<a title="钙"><span class="elrd">20</span>&nbsp;<span class="elff">Ca</span><br>
								<span class="eltl">钙</span><br>
								<span class="elen"></span></a>
						</div>
						<div class="trueel elboxs elc3">
							<a title="钪"><span class="elrd">21</span>&nbsp;<span class="elff">Sc</span><br>
								<span class="eltl">钪</span><br>
								<span class="elen"></span></a>
						</div>
						<div class="trueel elboxs elc3">
							<a title="钛"><span class="elrd">22</span>&nbsp;<span class="elff">Ti</span><br>
								<span class="eltl">钛</span><br>
								<span class="elen"></span></a>
						</div>
						<div class="trueel elboxs elc3">
							<a title="钒"><span class="elrd">23</span>&nbsp;<span class="elff">V</span><br>
								<span class="eltl">钒</span><br>
								<span class="elen"></span></a>
						</div>
						<div class="trueel elboxs elc3">
							<a title="铬"><span class="elrd">24</span>&nbsp;<span class="elff">Cr</span><br>
								<span class="eltl">铬</span><br>
								<span class="elen"></span></a>
						</div>
						<div class="trueel elboxs elc3">
							<a title="锰"><span class="elrd">25</span>&nbsp;<span class="elff">Mn</span><br>
								<span class="eltl">锰</span><br>
								<span class="elen"></span></a>
						</div>
						<div class="trueel elboxs elc3">
							<a title="铁"><span class="elrd">26</span>&nbsp;<span class="elff">Fe</span><br>
								<span class="eltl">铁</span><br>
								<span class="elen"></span></a>
						</div>
						<div class="trueel elboxs elc3">
							<a title="钴"><span class="elrd">27</span>&nbsp;<span class="elff">Co</span><br>
								<span class="eltl">钴</span><br>
								<span class="elen"></span></a>
						</div>
						<div class="trueel elboxs elc3">
							<a title="镍"><span class="elrd">28</span>&nbsp;<span class="elff">Ni</span><br>
								<span class="eltl">镍</span><br>
								<span class="elen"></span></a>
						</div>
						<div class="trueel elboxs elc3">
							<a title="铜"><span class="elrd">29</span>&nbsp;<span class="elff">Cu</span><br>
								<span class="eltl">铜</span><br>
								<span class="elen"></span></a>
						</div>
						<div class="trueel elboxs elc3">
							<a title="锌"><span class="elrd">30</span>&nbsp;<span class="elff">Zn</span><br>
								<span class="eltl">锌</span><br>
								<span class="elen"></span></a>
						</div>
						<div class="trueel elboxs elc6">
							<a title="镓"><span class="elrd">31</span>&nbsp;<span class="elff">Ga</span><br>
								<span class="eltl">镓</span><br>
								<span class="elen"></span></a>
						</div>
						<div class="trueel elboxs elc9">
							<a title="锗"><span class="elrd">32</span>&nbsp;<span class="elff">Ge</span><br>
								<span class="eltl">锗</span><br>
								<span class="elen"></span></a>
						</div>
						<div class="trueel elboxs elc9">
							<a title="砷"><span class="elrd">33</span>&nbsp;<span class="elff">As</span><br>
								<span class="eltl">砷</span><br>
								<span class="elen"></span></a>
						</div>
						<div class="trueel elboxs elc7">
							<a title="硒"><span class="elrd">34</span>&nbsp;<span class="elff">Se</span><br>
								<span class="eltl">硒</span><br>
								<span class="elen"></span></a>
						</div>
						<div class="trueel elboxs elc7">
							<a title="溴"><span class="elrd">35</span>&nbsp;<span class="elff">Br</span><br>
								<span class="eltl">溴</span><br>
								<span class="elen"></span></a>
						</div>
						<div class="trueel elboxs elc8">
							<a title="氪"><span class="elrd">36</span>&nbsp;<span class="elff">Kr</span><br>
								<span class="eltl">氪</span><br>
								<span class="elen"></span></a>
						</div>
					</div>
					<div class="elbox">
						<div class="elboxs3">
							<br>
							5
						</div>
						<div class="trueel elboxs elc1">
							<a title="铷"><span class="elrd">37</span>&nbsp;<span class="elff">Rb</span><br>
								<span class="eltl">铷</span><br>
								<span class="elen"></span></a>
						</div>
						<div class="trueel elboxs elc2">
							<a title="锶"><span class="elrd">38</span>&nbsp;<span class="elff">Sr</span><br>
								<span class="eltl">锶</span><br>
								<span class="elen"></span></a>
						</div>
						<div class="trueel elboxs elc3">
							<a title="钇"><span class="elrd">39</span>&nbsp;<span class="elff">Y</span><br>
								<span class="eltl">钇</span><br>
								<span class="elen"></span></a>
						</div>
						<div class="trueel elboxs elc3">
							<a title="锆"><span class="elrd">40</span>&nbsp;<span class="elff">Zr</span><br>
								<span class="eltl">锆</span><br>
								<span class="elen"></span></a>
						</div>
						<div class="trueel elboxs elc3">
							<a title="铌"><span class="elrd">41</span>&nbsp;<span class="elff">Nb</span><br>
								<span class="eltl">铌</span><br>
								<span class="elen"></span></a>
						</div>
						<div class="trueel elboxs elc3">
							<a title="钼"><span class="elrd">42</span>&nbsp;<span class="elff">Mo</span><br>
								<span class="eltl">钼</span><br>
								<span class="elen"></span></a>
						</div>
						<div class="trueel elboxs elc3">
							<a title="锝"><span class="elrd">43</span>&nbsp;<span class="elff">Tc</span><br>
								<span class="eltl">锝</span><br>
								<span class="elen"></span></a>
						</div>
						<div class="trueel elboxs elc3">
							<a title="钌"><span class="elrd">44</span>&nbsp;<span class="elff">Ru</span><br>
								<span class="eltl">钌</span><br>
								<span class="elen"></span></a>
						</div>
						<div class="trueel elboxs elc3">
							<a title="铑"><span class="elrd">45</span>&nbsp;<span class="elff">Rh</span><br>
								<span class="eltl">铑</span><br>
								<span class="elen"></span></a>
						</div>
						<div class="trueel elboxs elc3">
							<a title="钯"><span class="elrd">46</span>&nbsp;<span class="elff">Pd</span><br>
								<span class="eltl">钯</span><br>
								<span class="elen"></span></a>
						</div>
						<div class="trueel elboxs elc3">
							<a title="银"><span class="elrd">47</span>&nbsp;<span class="elff">Ag</span><br>
								<span class="eltl">银</span><br>
								<span class="elen"></span></a>
						</div>
						<div class="trueel elboxs elc3">
							<a title="镉"><span class="elrd">48</span>&nbsp;<span class="elff">Cd</span><br>
								<span class="eltl">镉</span><br>
								<span class="elen"></span></a>
						</div>
						<div class="trueel elboxs elc6">
							<a title="铟"><span class="elrd">49</span>&nbsp;<span class="elff">In</span><br>
								<span class="eltl">铟</span><br>
								<span class="elen"></span></a>
						</div>
						<div class="trueel elboxs elc6">
							<a title="锡"><span class="elrd">50</span>&nbsp;<span class="elff">Sn</span><br>
								<span class="eltl">锡</span><br>
								<span class="elen"></span></a>
						</div>
						<div class="trueel elboxs elc9">
							<a title="锑"><span class="elrd">51</span>&nbsp;<span class="elff">Sb</span><br>
								<span class="eltl">锑</span><br>
								<span class="elen"></span></a>
						</div>
						<div class="trueel elboxs elc9">
							<a title="碲"><span class="elrd">52</span>&nbsp;<span class="elff">Te</span><br>
								<span class="eltl">碲</span><br>
								<span class="elen"></span></a>
						</div>
						<div class="trueel elboxs elc7">
							<a title="碘"><span class="elrd">53</span>&nbsp;<span class="elff">I</span><br>
								<span class="eltl">碘</span><br>
								<span class="elen"></span></a>
						</div>
						<div class="trueel elboxs elc8">
							<a title="氙"><span class="elrd">54</span>&nbsp;<span class="elff">Xe</span><br>
								<span class="eltl">氙</span><br>
								<span class="elen"></span></a>
						</div>
					</div>
					<div class="elbox">
						<div class="elboxs3">
							<br>
							6
						</div>
						<div class="trueel elboxs elc1">
							<a title="铯"><span class="elrd">55</span>&nbsp;<span class="elff">Cs</span><br>
								<span class="eltl">铯</span><br>
								<span class="elen"></span></a>
						</div>
						<div class="trueel elboxs elc2">
							<a title="钡"><span class="elrd">56</span>&nbsp;<span class="elff">ba</span><br>
								<span class="eltl">钡</span><br>
								<span class="elen"></span></a>
						</div>
						<div class="elboxs elc4">
							<a href="javascript:void(0);" title="镧系"><span class="elrd">57-71</span><br>
								<span class="elff">La-Lu</span><br>
								<span class="eltl">镧系</span></a>
						</div>
						<div class="trueel elboxs elc3">
							<a title="铪"><span class="elrd">72</span>&nbsp;<span class="elff">Hf</span><br>
								<span class="eltl">铪</span><br>
								<span class="elen"></span></a>
						</div>
						<div class="trueel elboxs elc3">
							<a title="钽"><span class="elrd">73</span>&nbsp;<span class="elff">Ta</span><br>
								<span class="eltl">钽</span><br>
								<span class="elen"></span></a>
						</div>
						<div class="trueel elboxs elc3">
							<a title="钨"><span class="elrd">74</span>&nbsp;<span class="elff">W</span><br>
								<span class="eltl">钨</span><br>
								<span class="elen"></span></a>
						</div>
						<div class="trueel elboxs elc3">
							<a title="铼"><span class="elrd">75</span>&nbsp;<span class="elff">Re</span><br>
								<span class="eltl">铼</span><br>
								<span class="elen"></span></a>
						</div>
						<div class="trueel elboxs elc3">
							<a title="锇"><span class="elrd">76</span>&nbsp;<span class="elff">Os</span><br>
								<span class="eltl">锇</span><br>
								<span class="elen"></span></a>
						</div>
						<div class="trueel elboxs elc3">
							<a title="铱"><span class="elrd">77</span>&nbsp;<span class="elff">Ir</span><br>
								<span class="eltl">铱</span><br>
								<span class="elen"></span></a>
						</div>
						<div class="trueel elboxs elc3">
							<a title="铂"><span class="elrd">78</span>&nbsp;<span class="elff">Pt</span><br>
								<span class="eltl">铂</span><br>
								<span class="elen"></span></a>
						</div>
						<div class="trueel elboxs elc3">
							<a title="金"><span class="elrd">79</span>&nbsp;<span class="elff">Au</span><br>
								<span class="eltl">金</span><br>
								<span class="elen"></span></a>
						</div>
						<div class="trueel elboxs elc3">
							<a title="汞"><span class="elrd">80</span>&nbsp;<span class="elff">Hg</span><br>
								<span class="eltl">汞</span><br>
								<span class="elen"></span></a>
						</div>
						<div class="trueel elboxs elc6">
							<a title="铊"><span class="elrd">81</span>&nbsp;<span class="elff">Tl</span><br>
								<span class="eltl">铊</span><br>
								<span class="elen"></span></a>
						</div>
						<div class="trueel elboxs elc6">
							<a title="铅"><span class="elrd">82</span>&nbsp;<span class="elff">Pb</span><br>
								<span class="eltl">铅</span><br>
								<span class="elen"></span></a>
						</div>
						<div class="trueel elboxs elc6">
							<a title="铋"><span class="elrd">83</span>&nbsp;<span class="elff">Bi</span><br>
								<span class="eltl">铋</span><br>
								<span class="elen"></span></a>
						</div>
						<div class="trueel elboxs elc6">
							<a title="钋"><span class="elrd">84</span>&nbsp;<span class="elff">Po</span><br>
								<span class="eltl">钋</span><br>
								<span class="elen"></span></a>
						</div>
						<div class="trueel elboxs elc9">
							<a title="砹"><span class="elrd">85</span>&nbsp;<span class="elff">At</span><br>
								<span class="eltl">砹</span><br>
								<span class="elen"></span></a>
						</div>
						<div class="trueel elboxs elc8">
							<a title="氡"><span class="elrd">86</span>&nbsp;<span class="elff">Rn</span><br>
								<span class="eltl">氡</span><br>
								<span class="elen"></span></a>
						</div>
					</div>
					<div class="elbox">
						<div class="elboxs3">
							<br>
							7
						</div>
						<div class="trueel elboxs elc1">
							<a title="钫"><span class="elrd">87</span>&nbsp;<span class="elff">Fr</span><br>
								<span class="eltl">钫</span><br>
								<span class="elen"></span></a>
						</div>
						<div class="trueel elboxs elc2">
							<a title="镭"><span class="elrd">88</span>&nbsp;<span class="elff">Ra</span><br>
								<span class="eltl">镭</span><br>
								<span class="elen"></span></a>
						</div>
						<div class="elboxs elc5">
							<a href="javascript:void(0);" title="锕系"><span class="elrd">89-103</span><br>
								<span class="elff">Ac-Lr</span><br>
								<span class="eltl">锕系</span></a>
						</div>
						<div class="trueel elboxs elc3">
							<a title="𬬻"><span class="elrd">104</span>&nbsp;<span class="elff">Rf</span><br>
								<span class="eltl">𬬻</span><br>
								<span class="elen"></span></a>
						</div>
						<div class="trueel elboxs elc3">
							<a title="𬭊"><span class="elrd">105</span>&nbsp;<span class="elff">Db</span><br>
								<span class="eltl">𬭊</span><br>
								<span class="elen"></span></a>
						</div>
						<div class="trueel elboxs elc3">
							<a title="𬭳"><span class="elrd">106</span>&nbsp;<span class="elff">Sg</span><br>
								<span class="eltl">𬭳</span><br>
								<span class="elen"></span></a>
						</div>
						<div class="trueel elboxs elc3">
							<a title="𬭛"><span class="elrd">107</span>&nbsp;<span class="elff">Bh</span><br>
								<span class="eltl">𬭛</span><br>
								<span class="elen"></span></a>
						</div>
						<div class="trueel elboxs elc3">
							<a title="𬭶"><span class="elrd">108</span>&nbsp;<span class="elff">Hs</span><br>
								<span class="eltl">𬭶</span><br>
								<span class="elen"></span></a>
						</div>
						<div class="trueel elboxs elc3">
							<a title="鿏"><span class="elrd">109</span>&nbsp;<span class="elff">Mt</span><br>
								<span class="eltl">鿏</span><br>
								<span class="elen"></span></a>
						</div>
						<div class="trueel elboxs elc3">
							<a title="𫟼"><span class="elrd">110</span>&nbsp;<span class="elff">Ds</span><br>
								<span class="eltl">𫟼</span><br>
								<span class="elen"></span></a>
						</div>
						<div class="trueel elboxs elc3">
							<a title="𬬭"><span class="elrd">111</span>&nbsp;<span class="elff">Rg</span><br>
								<span class="eltl">𬬭</span><br>
								<span class="elen"></span></a>
						</div>
						<div class="trueel elboxs elc3">
							<a title="鿔"><span class="elrd">112</span>&nbsp;<span class="elff">Cn</span><br>
								<span class="eltl">鿔</span><br>
								<span class="elen"></span></a>
						</div>
						<div class="trueel elboxs elc6">
							<a title="uut"><span class="elrd">113</span>&nbsp;<span class="elff"></span><br>
								<span class="eltl">uut</span><br>
								<span class="elen"></span></a>
						</div>
						<div class="trueel elboxs elc6">
							<a title="𫓧"><span class="elrd">114</span>&nbsp;<span class="elff"></span><br>
								<span class="eltl">𫓧</span><br>
								<span class="elen"></span></a>
						</div>
						<div class="trueel elboxs elc6">
							<a title="镆"><span class="elrd">115</span>&nbsp;<span class="elff"></span><br>
								<span class="eltl">镆</span><br>
								<span class="elen"></span></a>
						</div>
						<div class="trueel elboxs elc6">
							<a title="𫟷"><span class="elrd">116</span>&nbsp;<span class="elff"></span><br>
								<span class="eltl">𫟷</span><br>
								<span class="elen"></span></a>
						</div>
						<div class="trueel elboxs">
							<a title="uus"><span style="color: #000000;" class="elrd">117</span>&nbsp;<span
									class="elff"></span><br>
								<span class="eltl" style="color: #000000;">uus</span><br>
								<span class="elen"></span></a>
						</div>
						<div class="trueel elboxs">
							<a title="uuo"><span style="color: #000000;" class="elrd">118</span>&nbsp;<span
									class="elff"></span><br>
								<span class="eltl" style="color: #000000;">uuo</span><br>
								<span class="elen"></span></a>
						</div>

					</div>

					<div class="cl"></div>

					<div class="elbox2">
						<div class="elboxs2"></div>
						<div class="elboxs elc4">
							<a href="javascript:void(0);"><span class="eltl m10p">镧<br>
									系</span></a>
						</div>
						<div class="trueel elboxs elc4">
							<a title="镧"><span class="elrd">57</span>&nbsp;<span class="elff">La</span><br>
								<span class="eltl">镧</span><br>
								<span class="elen"></span></a>
						</div>
						<div class="trueel elboxs elc4">
							<a title="铈"><span class="elrd">58</span>&nbsp;<span class="elff">Ce</span><br>
								<span class="eltl">铈</span><br>
								<span class="elen"></span></a>
						</div>
						<div class="trueel elboxs elc4">
							<a title="镨"><span class="elrd">59</span>&nbsp;<span class="elff">Pr</span><br>
								<span class="eltl">镨</span><br>
								<span class="elen"></span></a>
						</div>
						<div class="trueel elboxs elc4">
							<a title="钕"><span class="elrd">60</span>&nbsp;<span class="elff">Nd</span><br>
								<span class="eltl">钕</span><br>
								<span class="elen"></span></a>
						</div>
						<div class="trueel elboxs elc4">
							<a title="钷"><span class="elrd">61</span>&nbsp;<span class="elff">Pm</span><br>
								<span class="eltl">钷</span><br>
								<span class="elen"></span></a>
						</div>
						<div class="trueel elboxs elc4">
							<a title="钐"><span class="elrd">62</span>&nbsp;<span class="elff">Sm</span><br>
								<span class="eltl">钐</span><br>
								<span class="elen"></span></a>
						</div>
						<div class="trueel elboxs elc4">
							<a title="铕"><span class="elrd">63</span>&nbsp;<span class="elff">Eu</span><br>
								<span class="eltl">铕</span><br>
								<span class="elen"></span></a>
						</div>
						<div class="trueel elboxs elc4">
							<a title="钆"><span class="elrd">64</span>&nbsp;<span class="elff">Gd</span><br>
								<span class="eltl">钆</span><br>
								<span class="elen"></span></a>
						</div>
						<div class="trueel elboxs elc4">
							<a title="铽"><span class="elrd">65</span>&nbsp;<span class="elff">Tb</span><br>
								<span class="eltl">铽</span><br>
								<span class="elen"></span></a>
						</div>
						<div class="trueel elboxs elc4">
							<a title="镝"><span class="elrd">66</span>&nbsp;<span class="elff">Dy</span><br>
								<span class="eltl">镝</span><br>
								<span class="elen"></span></a>
						</div>
						<div class="trueel elboxs elc4">
							<a title="钬"><span class="elrd">67</span>&nbsp;<span class="elff">Ho</span><br>
								<span class="eltl">钬</span><br>
								<span class="elen"></span></a>
						</div>
						<div class="trueel elboxs elc4">
							<a title="铒"><span class="elrd">68</span>&nbsp;<span class="elff">Er</span><br>
								<span class="eltl">铒</span><br>
								<span class="elen"></span></a>
						</div>
						<div class="trueel elboxs elc4">
							<a title="铥"><span class="elrd">69</span>&nbsp;<span class="elff">Tm</span><br>
								<span class="eltl">铥</span><br>
								<span class="elen"></span></a>
						</div>
						<div class="trueel elboxs elc4">
							<a title="镱"><span class="elrd">70</span>&nbsp;<span class="elff">Yb</span><br>
								<span class="eltl">镱</span><br>
								<span class="elen"></span></a>
						</div>
						<div class="trueel elboxs elc4">
							<a title="镥"><span class="elrd">71</span>&nbsp;<span class="elff">Lu</span><br>
								<span class="eltl">镥</span><br>
								<span class="elen"></span></a>
						</div>
						<div class="elboxs2"></div>
					</div>
					<div class="elbox2">
						<div class="elboxs2"></div>
						<div class="elboxs elc5">
							<a href="javascript:void(0);"><span class="eltl m10p">锕<br>
									系</span></a>
						</div>
						<div class="trueel elboxs elc5">
							<a title="锕"><span class="elrd">89</span>&nbsp;<span class="elff">Ac</span><br>
								<span class="eltl">锕</span><br>
								<span class="elen"></span></a>
						</div>
						<div class="trueel elboxs elc5">
							<a title="钍"><span class="elrd">90</span>&nbsp;<span class="elff">Th</span><br>
								<span class="eltl">钍</span><br>
								<span class="elen"></span></a>
						</div>
						<div class="trueel elboxs elc5">
							<a title="镤"><span class="elrd">91</span>&nbsp;<span class="elff">Pa</span><br>
								<span class="eltl">镤</span><br>
								<span class="elen"></span></a>
						</div>
						<div class="trueel elboxs elc5">
							<a title="铀"><span class="elrd">92</span>&nbsp;<span class="elff">U</span><br>
								<span class="eltl">铀</span><br>
								<span class="elen"></span></a>
						</div>
						<div class="trueel elboxs elc5">
							<a title="镎"><span class="elrd">93</span>&nbsp;<span class="elff">Np</span><br>
								<span class="eltl">镎</span><br>
								<span class="elen"></span></a>
						</div>
						<div class="trueel elboxs elc5">
							<a title="钚"><span class="elrd">94</span>&nbsp;<span class="elff">Pu</span><br>
								<span class="eltl">钚</span><br>
								<span class="elen"></span></a>
						</div>
						<div class="trueel elboxs elc5">
							<a title="镅"><span class="elrd">95</span>&nbsp;<span class="elff">Am</span><br>
								<span class="eltl">镅</span><br>
								<span class="elen"></span></a>
						</div>
						<div class="trueel elboxs elc5">
							<a title="锔"><span class="elrd">96</span>&nbsp;<span class="elff">Cm</span><br>
								<span class="eltl">锔</span><br>
								<span class="elen"></span></a>
						</div>
						<div class="trueel elboxs elc5">
							<a title="锫"><span class="elrd">97</span>&nbsp;<span class="elff">Bk</span><br>
								<span class="eltl">锫</span><br>
								<span class="elen"></span></a>
						</div>
						<div class="trueel elboxs elc5">
							<a title="锎"><span class="elrd">98</span>&nbsp;<span class="elff">Cf</span><br>
								<span class="eltl">锎</span><br>
								<span class="elen"></span></a>
						</div>
						<div class="trueel elboxs elc5">
							<a title="锿"><span class="elrd">99</span>&nbsp;<span class="elff">Es</span><br>
								<span class="eltl">锿</span><br>
								<span class="elen"></span></a>
						</div>
						<div class="trueel elboxs elc5">
							<a title="镄"><span class="elrd">100</span>&nbsp;<span class="elff">Fm</span><br>
								<span class="eltl">镄</span><br>
								<span class="elen"></span></a>
						</div>
						<div class="trueel elboxs elc5">
							<a title="钔"><span class="elrd">101</span>&nbsp;<span class="elff">Md</span><br>
								<span class="eltl">钔</span><br>
								<span class="elen"></span></a>
						</div>
						<div class="trueel elboxs elc5">
							<a title="锘"><span class="elrd">102</span>&nbsp;<span class="elff">No</span><br>
								<span class="eltl">锘</span><br>
								<span class="elen"></span></a>
						</div>
						<div class="trueel elboxs elc5">
							<a title="铹"><span class="elrd">103</span>&nbsp;<span class="elff">Lr</span><br>
								<span class="eltl">铹</span><br>
								<span class="elen"></span></a>
						</div>
					</div>
					<div class="cl"></div>
				</div>
			</div>

		</div>

		<script>
			var allData = null
			var q = $(function() {
				var nowel = {

					},
					info = null,
					defHTML = `
					<div class="rowS" style="height:25px" onclick="window.location.href='YS.html?n='+[[atomic]]">
					点击查看该元素元素卡片
					</div>
					<div class="inforow">
					<input type="range" name="points" min="-273" max="5727" value="0" onchange="changeT(this.value);">
					</div>
					<div class="inforow">
					<span id="x-T">0℃，273K</span>
					</div>
					<div class="rowS" style="justify-content: center;"><img src="svg/compropago.svg" style="height:25px;padding-right:4px"> 性质</div>
					<div class="inforow">
					<span>
						原子量
					</span>
					<span>
						[[weight]]
						<select>
							<option>u</option>
						</select>
					</span>
					</div>
					<div class="inforow">
					<span>
						熔点
					</span>
					<span>
						[[melt]]
						<select>
							<option>K</option>
						</select>
					</span>
					</div>
					<div class="inforow">
					<span>
						沸点
					</span>
					<span>
						[[boil]]
						<select>
							<option>K</option>
						</select>
					</span>
					</div>
					<div class="inforow" onclick="changeDFX()">
					<span>
						电负性<i class="yesClick">√</i>
					</span>
					<span>
						[[electroneg]]
					</span>
					</div>
					<div class="inforow">
					<span>
						化合价
					</span>
					<span>
						[[valence]]
					</span>
					</div>
					<div class="inforow">
					<span>
						氧化态
					</span>
					<span>
						[[oxidation]]
					</span>
					</div>
					<div class="inforow" onclick="changeR()">
					<span>
						半径<i class="yesClick">√</i>
					</span>
					<span>
					<select onchange="$('#x-radius').html(this.value)">
						<option value="[[radius.calculated]]">计算得到</option>
						<option value="[[radius.empirical]]">试验得到</option>
						<option value="[[radius.covalent]]">共价半径</option>
						<option value="[[radius.vanderwaals]]">范德华半径</option>
					</select>
					</span>
					<span>
						<span id="x-radius">[[radius.calculated]]</span>pm
					</span>
					</div>
					<div class="rowS" style="justify-content: center;"><img src="svg/electron.svg" style="height:25px;padding-right:4px"> 结构</div>
					<div class="inforow" style="height:70px">
					<span>
						电子排布
					</span>
					<span>
						[[expandedconfig]]
					</span>
					</div>
					<div class="inforow">
					<span>
						主量子数 n
					</span>
					<span>
						[[quantum.n]]
					</span>
					</div>
					<div class="inforow">
					<span>
						角量子数 l
					</span>
					<span>
						[[quantum.l]]
					</span>
					</div>
					<div class="inforow">
					<span>
						磁量子数 m
					</span>
					<span>
						[[quantum.m]]
					</span>
					</div>
					<div class="rowS" style="justify-content: center;"><img src="svg/info.svg" style="height:25px;padding-right:4px"> 信息</div>
					<div class="inforow" onclick="changeYear()">
					<span>
						发现时间<i class="yesClick">√</i>
					</span>
					<span>
						[[discover]]年
					</span>
					</div>
					<div class="inforow">
					<span>
						丰度
					</span>
					<span>
					<select onchange="$('#x-abundance').html(this.value)">
						<option value="[[abundance.universe]]">宇宙</option>
						<option value="[[abundance.solar]]">太阳系</option>
						<option value="[[abundance.meteor]]">流星</option>
						<option value="[[abundance.crust]]">宇宙</option>
						<option value="[[abundance.ocean]]">海洋</option>
						<option value="[[abundance.human]]">人体</option>
					</select>
					</span>
					<span>
						<span id="x-abundance">[[abundance.universe]]</span>%
					</span>
					</div>
					`
				Object.defineProperty(nowel, 'info', {
					// writable:true,
					set: function(value) {
						info = value
						var infoHTML = defHTML
						var infoList = infoHTML.match(/\[\[(.*?)\]\]/g)
						// console.log(infoList)
						for (var it of infoList) {
							if (it.indexOf(".") != -1) {
								let l = it.replace(/\[/g, "").replace(/\]/g, "")
								infoHTML = infoHTML.replace(/\[\[(.*?)\]\]/,
									nowel.info[l.split(".")[0]] ? nowel.info[l.split(".")[0]][l.split(
										".")[1]] : null)
								continue
							}
							let writeNow=nowel.info[it.replace(/\[/g, "").replace(/\]/g, "")]
							infoHTML = infoHTML.replace(/\[\[(.*?)\]\]/,writeNow?writeNow:"无")
							// console.log(it.slice(2).slice(2))
						}
						document.getElementById("elinfo").innerHTML = infoHTML
						// console.log(nowel.info)
					},
					get: function() {

						return info
					}
				})
				$.get("info.json",
					function(data, status) {
						let weight = 0
						allData = data;
						for (var i of data) {
							weight = (i.weight % 1 === 0 ? `(${i.weight})` : i.weight)
							setElen(Number(i.atomic) - 1, weight)

						}
					});
				$(".trueel").click(function() {
					var item = (/<span class="elrd">(.*?)<\/span>/.exec(this.innerHTML)[1])
					nowel.info = allData[item - 1]
					// console.dir(allData[item-1])
				})

				var elements = document.querySelectorAll('.elboxs');

				anime({
					targets: elements,
					opacity: 1,
					direction: 'alternate',
					loop: false,
					delay: function(el, i, l) {
						return i * 10;
					},
					endDelay: function(el, i, l) {
						return (l - i) * 100;
					}
				});

				function sleep(time) {
					return new Promise((resolve) => setTimeout(resolve, time));
				}


			})

			function changeT(T) {
				T = Number(T)
				$('#x-T').html(T + "℃，" + (T + 273) + "K")

				for (let inf of allData) {
					if ((T + 273.15) > Number(inf.boil)) {
						setElen(Number(inf.atomic) - 1, "气态", "#ffaa7f")
						// console.log(Number(inf.atomic) - 1)
					} else if ((T + 273.15) < Number(inf.melt)) {
						setElen(Number(inf.atomic) - 1, "固态", "skyblue")
					} else {
						if (Number(inf.atomic) == 0) continue

						setElen(Number(inf.atomic) - 1, "液态", "white")
						// document.getElementsByClassName("trueel")[Number(inf.atomic) - 1].removeAttribute("style")
					}
					// let indexNum=0
					// if (inf == "0") continue

					// indexNum++
				}
			}

			function changeDFX() {
				for (let inf of allData) {
					let electroneg = Number(inf.electroneg),
						item = Number(inf.atomic) - 1
					if (!electroneg) {
						setElen(item, "无", `rgb(236, 236, 236)`)
						continue;
					}
					setElen(item, Number(inf.electroneg), `rgb(255,${electroneg*100},0)`)
				}
			}

			function changeR() {
				for (let inf of allData) {
					let item = Number(inf.atomic) - 1
					if (!inf.radius) {
						setElen(item, "无", `rgb(236, 236, 236)`)
						continue;
					}
					let calculated = Number(inf.radius.calculated)
					if (!calculated) {
						setElen(item, "无", `rgb(236, 236, 236)`)
						continue;
					}
					setElen(item, calculated + "pm", `rgb(${calculated*1},255,0)`)
				}
			}

			function changeYear() {
				let elboxs = document.getElementsByClassName("trueel"),
					item
				for (let inf of allData) {
					item = Number(inf.atomic) - 1
					setElen(item, inf.discover + "年")
					elboxs[item].removeAttribute("style")
					elboxs[item].style.opacity = 1

				}
			}

			function setElen(index, value, color) {
				let elens = document.getElementsByClassName("elen")
				let elboxs = document.getElementsByClassName("trueel")
				if (index >= 56 && index <= 70) {
					index += 32
					// console.log(index,value)
					elens[index].innerHTML = value
					color ? elboxs[index].style.background = color : null
				}
				if (index >= 71 && index <= 87) {
					index -= 15
					// console.log(index,value)
					elens[index].innerHTML = value
					color ? elboxs[index].style.background = color : null
				}
				if (index >= 88 && index <= 102) {
					index += 15
					elens[index].innerHTML = value
					color ? elboxs[index].style.background = color : null
				}
				if (index >= 103 & index <= 117) {
					index -= 30
				}
				elens[index].innerHTML = value
				color ? elboxs[index].style.background = color : null
			}
			document.getElementsByClassName("elboxs0")[0].addEventListener("click", function(eve) {
				var tar=eve.target.classList[1]
				for(var i of document.getElementsByClassName("trueel")){
					i.removeAttribute("style")
					i.style.opacity = 1
					if(i.className.indexOf(tar)==-1){
						i.style.background="white"
					}
				}
			})
		</script>
	</body>
</html>
